<template>
  <h1>商品列表</h1>
  <ul>
    <li v-for="item in productStore.products" :key="item.name">
      <span>商品：{{ item.name }}</span>
      <span>单价：{{ item.price }}</span>
      <span>库存：{{ item.remain }}</span>
      <button @click="add(item)">加入购物车</button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted } from "vue-demi";
import { useProductStore, useShoppingCartStore } from "../store";
import { IProduct } from "../store/product";

const productStore = useProductStore();
const shoppingCartStore = useShoppingCartStore();
function add (product: IProduct) {
  shoppingCartStore.add(product)
}
onMounted(async () => {
  await productStore.init()
})
</script>
<style scoped>
span {
  display: inline-block;
  width: 120px;
}
</style>